{% extends 'register/base.html' %}
{% load admin_list i18n %}
{% block title %}<title>:: duetopia :: {% trans 'spatial search' %} - {{ model.verbose_name }}</title>{% endblock %}
{% block tools %}
<a href="{{ baseurl }}dataset/">{% trans "data sets" %}</a> |
<a href="{{ baseurl }}dataset/search/">{% trans "spatial search" %}</a>
<hr/>
{% endblock %}

{% block script %}
<script src="{{ baseurl }}static/OpenLayers.js"></script>
<style type="text/css">
            #preview {
                width: 512px;
                height: 360px;
                border: 1px solid black;
            }
        </style>

<script type="text/javascript">
<!--
    function init() {

        var map = new OpenLayers.Map("preview",{'maxResolution': 360/512, 'restrictedExtent': new OpenLayers.Bounds(-180, -90, 180, 90)}); 
        layer = new OpenLayers.Layer.WMS("vmap0","{{ tilecache }}", { layers : "basic" });

        boxlayer =  new OpenLayers.Layer.Boxes( "Boxes" );
        var lastbox = null;
        {% if top %}
        var top = {{ top }};
        var bottom = {{ bottom }};
        var left = {{ left }};
        var right =  {{ right }};
        ext = new OpenLayers.Bounds(left,bottom,right,top);
        box = new OpenLayers.Marker.Box(ext);
        boxlayer.addMarker(box);        
        lastbox = box;
        {% endif %}


        var control = new OpenLayers.Control();
                OpenLayers.Util.extend(control, {
                    draw: function () {
                        // this Handler.Box will intercept the shift-mousedown
                        // before Control.MouseDefault gets to see it
                        this.box = new OpenLayers.Handler.Box( control,
                            {"done": this.notice},
                            {keyMask: OpenLayers.Handler.MOD_SHIFT});
                        // OpenLayers.Util.extend(this.box,{
        //} 
          //              });

                        this.box.activate();
                    },
                    notice: function (bounds) {
                       var ll = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.left, bounds.bottom)); 
                       var ur = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.right, bounds.top)); 
                       left = ll.lon.toFixed(2);
                       bottom = ll.lat.toFixed(2); 
                       right = ur.lon.toFixed(2);
                       top = ur.lat.toFixed(2);  
                       bbox = left + ", " + bottom + ", " + right + ", " + top;
                       query = document.getElementById('box');
                       query.setAttribute('value', bbox); 

                       var b_left = document.getElementById('left');
                       b_left.setAttribute('value', left); 
                       var b_right = document.getElementById('right');
                       b_right.setAttribute('value', right);
                       var b_bottom = document.getElementById('bottom');
                       b_bottom.setAttribute('value', bottom);
                       var b_top= document.getElementById('top');
                       b_top.setAttribute('value', top);


                       ext = new OpenLayers.Bounds(left,bottom,right,top);
                       box = new OpenLayers.Marker.Box(ext);

                       box.events.register("click", box, function (e) {
                                this.setBorder("yellow");
                       });

                       //alert(ext); 
                       if (this.lastbox!=null) { 
                         boxlayer.removeMarker(this.lastbox);
                       }
                       boxlayer.addMarker(box);
                           this.lastbox = box; 
                       }
        });

        map.addControl(control);        
        map.addLayers([layer,boxlayer]);

        // map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
        if (!map.getCenter()) map.zoomToMaxExtent();        
    }
-->
</script>
{% endblock %}

{% block content %}

<table><tr><td valign="top">
{% block search %}
<form method="GET" id="changelist-search">

<table>
<tr>
<td></td><td><input type="text" size="4" name="top" id="top" {% if top %}value="{{ top }}"{% endif %}></td><td></td>
</tr>
<tr>
<td><input type="text" size="4" name="left" id="left"  {% if left %}value="{{ left }}"{% endif %}></td><td></td><td><input type="text" size="4" name="right" id="right" {% if right %}value="{{ right }}"{% endif %}></td>
</tr>
<tr>
<td></td><td><input type="text" size="4" name="bottom" id="bottom" {% if bottom %}value="{{ bottom }}"{% endif %}></td><td></td>
</tr>
</table>

<p><input id="box" type="hidden" name="box"></p>


<input type="submit" value="search"/>

</form>

<p class="notes">HOLD SHIFT TO DRAW BOX</p>
<div id="preview"></div>
{% endblock %}

</td>
<td>

<div class="changelist">
<h3>{% trans 'query results' %}: {{model.verbose_name}}</h3>
{% block filters %}{% filters cl %}{% endblock %}
{% block result_list %}{% result_list cl %}{% endblock %}
{% block pagination %}{% pagination cl %}{% endblock %}
</div>

</td></tr></table>

{% endblock %}
